<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的页面</title>
  </head>
  <body>
    <!-- 顶部轮播 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
          <img
            src="../../assets/imgs/course-img04.jpg"
            alt=""
            height="95"
            width="375"
          />
        </div>
        <div class="swiper-slide">
          <img
            src="../../assets/imgs/course-img05.jpg"
            alt=""
            height="95"
            width="375"
          />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <main class="disflex">
      <div class="myself">
        <div class="disflex acenter">
          <div class="pic-head"><img id="avatarPic" /></div>
          <h2 class="f22" id="nickTxt">用户名</h2>
          <span
            class="iconfont icon-rightarrow abs"
            id="jump"
            style="right: 20px"
          ></span>
        </div>
        <p class="f18">个性签名:<span id="signTxt">xxxxxxxxxxxxxx</span></p>
      </div>
      <div class="clock-in disflex acenter">
        <div class="clock-pic"></div>
        <p>累计打卡<span class="f22" id="clockText">0</span>天</p>
        <div class="clock-day f20" id="clockbtn">今日打卡</div>
      </div>
      <!-- 个人动态 -->
      <div class="trends disflex acenter">
        <div class="trends-pic"></div>
        <p>个人动态</p>
        <div class="trends-message">10条&nbsp;</div>
        <span class="iconfont icon-rightarrow"></span>
      </div>
      <!-- 运动数据 -->
      <div class="sports-data">
        <div class="sports-top disflex acenter">
          <div class="sports-pic"></div>
          <p>运动数据</p>
          <div class="sports-message">
            <span class="iconfont icon-rightarrow" id="sportspic"></span>
          </div>
        </div>
        <div class="sports-body disflex">
          <div class="sp-left">
            <p class="s-mini">总运动</p>
            <p class="s-big" id="kc">99999</p>
          </div>
          <div>
            <p class="s-mini">本周消耗</p>
            <p class="s-big" id="km">99999</p>
          </div>
        </div>
      </div>
      <!-- 我的运动徽章 -->
      <div class="badge">
        <div class="badge-top disflex acenter">
          <div class="badge-pic"></div>
          <p>我的运动徽章</p>
          <div class="badge-message">
            <span class="iconfont icon-rightarrow" id="badge-jump"></span>
          </div>
        </div>
        <div class="badge-body disflex jcsa">
          <div><img src="../../assets/imgs/mybadge01.jpg" alt="" /></div>
          <div><img src="../../assets/imgs/mybadge08.jpg" alt="" /></div>
          <div><img src="../../assets/imgs/mybadge06.jpg" alt="" /></div>
        </div>
      </div>
      <div class="out"><a href="#">退出登录</a></div>
    </main>
    <div class="foot-div"></div>
    <footer></footer>
  </body>
</html>
